<?php include "../public/header.php";?>
<?php include "../public/header_public.php";?>
<link rel='stylesheet' href='/static/admin/css/ban.css'>
<script type="text/javascript" src="/static/admin/echarts/echarts.min.js"></script>
<style>
    .xm-label-block{border: unset!important;}
    .xm-label-block span{font-size: 16px!important;}
    .xm-icon-close{display: none!important;}
    .busdiv{width: 200px;float: left;margin-left: 20px}
    .busdiv input{height: 30px!important;}
    .layui-select-title input{height: 30px}
</style>
<body id="banCaiPage">
<div id="banBox">
    <div class="minbox" style="margin-bottom: 10px;padding-top: 10px;height: 40px;">
        <div class="busdiv layui-form">
            <select id="year" name="year" lay-filter="year"></select>
        </div>
    </div>
    <div class="conbox">
        <div class="topbox">
            <div class="he he1">
                <div class="w1">年度收入</div>
                <div class="w2" id="top_shou">0</div>
                <img src="/static/admin/images/ban/top_3.png">
            </div>
            <div class="he he2">
                <div class="w1">年度支出</div>
                <div class="w2" id="top_zhi">0</div>
                <img src="/static/admin/images/ban/top_4.png">
            </div>
            <div class="he he3">
                <div class="w1">年度现金流</div>
                <div class="w2" id="top_xian">0</div>
                <img src="/static/admin/images/ban/top_6.png">
            </div>
        </div>
        <div class="clear"></div>
        <div class="botbox">
            <div class="zuo">
                <div class="thd">主营收入分析</div>
                <div class="tbd">
                    <div class="gtou">
                        <div class="t1">主营收入</div>
                        <div class="t2" id="count_zhushou">0</div>
                    </div>
                    <div class="clear"></div>
                    <div class="chart" id="chart_zhushou" style="margin-top: 10px"></div>
                </div>

                <div class="thd">主营支出</div>
                <div class="tbd">
                    <div class="gtou">
                        <div class="t1">主营支出</div>
                        <div class="t2" id="count_zhuzhi">0</div>
                    </div>
                    <div class="clear"></div>
                    <div class="chart" id="chart_zhuzhi" style="margin-top: 10px"></div>
                </div>

                <div class="thd">主营支出分析</div>
                <div class="tbd">
                    <div class="gtou">
                        <div class="t1">支出合计</div>
                        <div class="t2" id="count_zhuzhifen">0</div>
                    </div>
                    <div class="clear"></div>
                    <div class="chart" id="chart_zhuzhifen" style="margin-top: 10px;"></div>
                </div>

                <div class="thd">现金流分析</div>
                <div class="tbd">
                    <div class="gtou">
                        <div class="t1">年度现金流</div>
                        <div class="t2" id="count_xianfen">0</div>
                    </div>
                    <div class="clear"></div>
                    <div class="chart" id="chart_xianfen" style="margin-top: 10px"></div>
                </div>
            </div>
            <div class="zho">
                <div class="thd">其他收入</div>
                <div class="tbd">
                    <div class="gtou">
                        <div class="t1">其他收入</div>
                        <div class="t2" id="count_qishou">0</div>
                    </div>
                    <div class="clear"></div>
                    <div class="chart" id="chart_qishou" style="margin-top: 10px;width: calc(100% - 1px);height: 400px"></div>
                </div>

                <div class="thd">其他支出</div>
                <div class="tbd">
                    <div class="gtou">
                        <div class="t1">其他支出</div>
                        <div class="t2" id="count_qizhi">0</div>
                    </div>
                    <div class="clear"></div>
                    <div class="chart" id="chart_qizhi" style="margin-top: 10px;width: calc(100% - 1px);"></div>
                </div>

                <div class="thd">日常支出分析</div>
                <div class="tbd">
                    <div class="gtou">
                        <div class="t1">支出合计</div>
                        <div class="t2" id="count_rizhi">0</div>
                    </div>
                    <div class="clear"></div>
                    <div class="chart" id="chart_rizhi" style="margin-top: 10px;width: calc(100% - 1px);height: 600px"></div>
                </div>

                <div class="thd">保证金</div>
                <div class="tbd">
                    <div class="chart" id="chart_baojin" style="margin-top: 10px;width: calc(100% - 1px);"></div>
                </div>

            </div>
        </div>
        <div class="clear"></div>
        <div style="height: 80px"></div>
    </div>

</div>
<script>
    layui.use(['form', 'layer', "laytp",'element','dropdown'], function() {
        var form = layui.form,element = layui.element;

        get_cai_zong_ban();
        form.on('select(year)', function(data){
            get_cai_zong_ban()
        });

        function get_cai_zong_ban(){
            setTimeout(function () {
                var year = $("#year").val();
                facade.ajax({url: ask_cai_zong_ban, data:{year:year}}).done(function(res){
                    if (res.code === 2000) {
                        var data = res.data;
                        var toparr = data.top;

                        $("#top_shou").html(parseFormatNum(toparr.shou));
                        $("#top_zhi").html(parseFormatNum(toparr.zhi));
                        $("#top_xian").html(parseFormatNum(toparr.xian));
                        $("#count_xianfen").html(parseFormatNum(toparr.xian));

                        var yearStr = '';
                        var yeararr = res.data.yeararr;
                        for (var key in yeararr){
                            if(res.data.yearjin == yeararr[key]){
                                yearStr += '<option value="'+yeararr[key]+'" selected>'+yeararr[key]+'年</option>';
                            }else{
                                yearStr += '<option value="'+yeararr[key]+'">'+yeararr[key]+'年</option>';
                            }
                        }
                        $("#year").html(yearStr);
                        render_from();


                        get_cai_chart_zhushou_ban()
                        get_cai_chart_zhuzhi_ban()
                        get_cai_chart_zhuzhifen_ban()
                        get_cai_chart_xianfen_ban()
                        get_cai_chart_qishou_ban()
                        get_cai_chart_qizhi_ban()
                        get_cai_chart_rizhi_ban()
                        get_cai_chart_baojin_ban()
                    }
                });
            },300);
        }


        function get_cai_chart_zhushou_ban() {
            var year = $("#year").val();
            facade.ajax({url: ask_cai_chart_zhushou_ban, data:{year:year}}).done(function(res){
                if (res.code === 2000) {
                    var data = res.data;
                    $("#count_zhushou").html(parseFormatNum(res.data.count));
                    chart_zhushou('chart_zhushou', res.data.info);
                }
            });
        }
        function get_cai_chart_zhuzhi_ban() {
            var year = $("#year").val();
            facade.ajax({url: ask_cai_chart_zhuzhi_ban, data:{year:year}}).done(function(res){
                if (res.code === 2000) {
                    var data = res.data;
                    $("#count_zhuzhi").html(parseFormatNum(res.data.count));
                    chart_zhuzhi('chart_zhuzhi', res.data.info);
                }
            });
        }
        function get_cai_chart_zhuzhifen_ban() {
            var year = $("#year").val();
            facade.ajax({url: ask_cai_chart_zhuzhifen_ban, data:{year:year}}).done(function(res){
                if (res.code === 2000) {
                    var data = res.data;
                    $("#count_zhuzhifen").html(parseFormatNum(res.data.count));
                    chart_zhuzhifen('chart_zhuzhifen', res.data.info);
                }
            });
        }
        function get_cai_chart_xianfen_ban() {
            var year = $("#year").val();
            facade.ajax({url: ask_cai_chart_xianfen_ban, data:{year:year}}).done(function(res){
                if (res.code === 2000) {
                    var data = res.data;
                    // $("#count_xianfen").html(parseFormatNum(res.data.count));
                    chart_xianfen('chart_xianfen', res.data.shou, res.data.zhi, res.data.cha);
                }
            });
        }
        function get_cai_chart_qishou_ban() {
            var year = $("#year").val();
            facade.ajax({url: ask_cai_chart_qishou_ban, data:{year:year}}).done(function(res){
                if (res.code === 2000) {
                    var data = res.data;
                    $("#count_qishou").html(parseFormatNum(res.data.count));
                    chart_qishou('chart_qishou', res.data.nameArr, res.data.valueArr);
                }
            });
        }
        function get_cai_chart_qizhi_ban() {
            var year = $("#year").val();
            facade.ajax({url: ask_cai_chart_qizhi_ban, data:{year:year}}).done(function(res){
                if (res.code === 2000) {
                    var data = res.data;
                    $("#count_qizhi").html(parseFormatNum(res.data.count));
                    chart_qizhi('chart_qizhi', res.data.info);
                }
            });
        }
        function get_cai_chart_rizhi_ban() {
            var year = $("#year").val();
            facade.ajax({url: ask_cai_chart_rizhi_ban, data:{year:year}}).done(function(res){
                if (res.code === 2000) {
                    var data = res.data;
                    $("#count_rizhi").html(parseFormatNum(res.data.count));
                    chart_rizhi('chart_rizhi', res.data.nameArr, res.data.valueArr);
                }
            });
        }
        function get_cai_chart_baojin_ban() {
            var year = $("#year").val();
            facade.ajax({url: ask_cai_chart_baojin_ban, data:{year:year}}).done(function(res){
                if (res.code === 2000) {
                    var data = res.data;
                    chart_baojin('chart_baojin', res.data.info);
                }
            });
        }
    });



    function chart_zhushou(chat_id, data) {
        var mychat = echarts.init(document.getElementById(chat_id),'dark');
        mychat.clear();
        option = {
            color: '#5470c6',
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                },
            },
            grid: {
                top: '15%',
                left: '20%',
                right: '10%',
                bottom: '30%'
            },
            xAxis: {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value} 元'
                }
            },
            series: [
                {
                    itemStyle:{
                        normal:{
                            label : {
                                show: true // 在折线拐点上显示数据
                            },
                            lineStyle:{
                                width:1,  // 设置虚线宽度
                            }
                        }
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: '#FFFFFF'
                            },
                            {
                                offset: 1,
                                color: '#5470c6'
                            }
                        ])
                    },
                    data: data,
                    type: 'line'
                }
            ]
        };
        mychat.setOption(option);
    }
    function chart_zhuzhi(chat_id, data) {
        var mychat = echarts.init(document.getElementById(chat_id),'dark');
        mychat.clear();
        option = {
            color: '#5470c6',
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                },
            },
            grid: {
                top: '15%',
                left: '20%',
                right: '10%',
                bottom: '30%'
            },
            xAxis: {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value} 元'
                }
            },
            series: [
                {
                    itemStyle:{
                        normal:{
                            label : {
                                show: true // 在折线拐点上显示数据
                            },
                            lineStyle:{
                                width:1,  // 设置虚线宽度
                            }
                        }
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: '#FFFFFF'
                            },
                            {
                                offset: 1,
                                color: '#5470c6'
                            }
                        ])
                    },
                    data: data,
                    type: 'line'
                }
            ]
        };
        mychat.setOption(option);
    }
    function chart_zhuzhifen(chat_id, data) {
        var info = [
            { value: data[1].money || 0, name: data[1].name },
            { value: data[2].money || 0, name: data[2].name },
            { value: data[3].money || 0, name: data[3].name },
            { value: data[4].money || 0, name: data[4].name },
            { value: data[5].money || 0, name: data[5].name },
            { value: data[6].money || 0, name: data[6].name }
        ]
        var mychat = echarts.init(document.getElementById(chat_id), 'dark');
        mychat.clear();
        option = {
            legend: {
                bottom: 15
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            series: [
                {
                    name: '单位（元）',
                    type: 'pie',
                    radius: '50%',
                    data: info
                }
            ]
        };
        mychat.setOption(option);
    }
    function chart_xianfen(chat_id, shou, zhi, cha) {
        var mychat = echarts.init(document.getElementById(chat_id), 'dark');
        mychat.clear();
        const colors = ['#5470C6', '#91CC75', '#EE6666'];
        option = {
            color: colors,
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                }
            },
            grid: {
                left: '15%',
                right: '26%',
                bottom: '13%'
            },
            toolbox: {
                feature: {
                    dataView: { show: true, readOnly: false },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            legend: {
                data: ['到账', '支出', '收支差']
            },
            xAxis: [
                {
                    type: 'category',
                    axisTick: {
                        alignWithLabel: true
                    },
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    name: '到账',
                    position: 'right',
                    alignTicks: true,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: colors[0]
                        }
                    },
                    axisLabel: {
                        formatter: '{value} 元'
                    }
                },
                {
                    type: 'value',
                    name: '支出',
                    position: 'right',
                    alignTicks: true,
                    offset: 80,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: colors[1]
                        }
                    },
                    axisLabel: {
                        formatter: '{value} 元'
                    }
                },
                {
                    type: 'value',
                    name: '收支差',
                    position: 'left',
                    alignTicks: true,
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: colors[2]
                        }
                    },
                    axisLabel: {
                        formatter: '{value} 元'
                    }
                }
            ],
            series: [
                {
                    name: '到账',
                    type: 'bar',
                    data: shou
                },
                {
                    name: '支出',
                    type: 'bar',
                    yAxisIndex: 1,
                    data: zhi
                },
                {
                    name: '收支差',
                    type: 'line',
                    yAxisIndex: 2,
                    itemStyle:{
                        normal:{
                            label : {
                                show: true // 在折线拐点上显示数据
                            },
                            lineStyle:{
                                width:1,  // 设置虚线宽度
                            }
                        }
                    },
                    data: cha
                }
            ]
        };
        mychat.setOption(option);
    }
    function chart_qishou(chat_id, nameArr, valueArr) {
        var mychat = echarts.init(document.getElementById(chat_id), 'dark');
        mychat.clear();
        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {},
            grid: {
                top: '3%',
                left: '20%',
                right: '10%',
                bottom: '10%',
                containLabel: false
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                type: 'category',
                data: nameArr
            },
            series: [
                {
                    type: 'bar',
                    data: valueArr
                }
            ]
        };
        mychat.setOption(option);
    }
    function chart_qizhi(chat_id, data) {
        var mychat = echarts.init(document.getElementById(chat_id),'dark');
        mychat.clear();
        option = {
            color: '#5470c6',
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross'
                },
            },
            grid: {
                top: '15%',
                left: '20%',
                right: '10%',
                bottom: '30%'
            },
            xAxis: {
                type: 'category',
                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    formatter: '{value} 元'
                }
            },
            series: [
                {
                    itemStyle:{
                        normal:{
                            label : {
                                show: true // 在折线拐点上显示数据
                            },
                            lineStyle:{
                                width:1,  // 设置虚线宽度
                            }
                        }
                    },
                    areaStyle: {
                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                            {
                                offset: 0,
                                color: '#FFFFFF'
                            },
                            {
                                offset: 1,
                                color: '#5470c6'
                            }
                        ])
                    },
                    data: data,
                    type: 'line'
                }
            ]
        };
        mychat.setOption(option);
    }
    function chart_rizhi(chat_id, nameArr, valueArr) {
        var mychat = echarts.init(document.getElementById(chat_id), 'dark');
        mychat.clear();
        option = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            legend: {},
            grid: {
                top: '3%',
                left: '20%',
                right: '10%',
                bottom: '10%',
                containLabel: false
            },
            xAxis: {
                type: 'value',
                boundaryGap: [0, 0.01]
            },
            yAxis: {
                type: 'category',
                data: nameArr
            },
            series: [
                {
                    type: 'bar',
                    data: valueArr
                }
            ]
        };
        mychat.setOption(option);
    }
    function chart_baojin(chat_id, data) {
        var info = [
            { value: data.shou || 0, name: '累计收取' },
            { value: data.fan || 0, name: '累计返还' },
            { value: data.jiao || 0, name: '累计缴纳' },
            { value: data.tui || 0, name: '累计退回' },
        ]
        var mychat = echarts.init(document.getElementById(chat_id),  'dark');
        mychat.clear();
        option = {
            legend: {
                type: 'scroll',
                orient: 'vertical',
                left: 50,
                top: 80
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            series: [
                {
                    name: '单位（元）',
                    type: 'pie',
                    radius: '50%',
                    center: ['60%', '50%'],
                    data: info
                }
            ]
        };
        mychat.setOption(option);
    }
</script>
</body>
</html>
